import styled from 'styled-components';

const CalendarWrapper = styled.section`
  background: white;
  border-radius:16px;
  margin: 10px;
  padding: 12px;
  >header{
    position: relative;
    .monthSelector{
      display: flex;
      align-items: center;
      justify-content: center;
      > span{
        margin: 0 24px;
      }
    }
    .today{
      color: #666;
      position: absolute;
      top: -2px;
      right: 0;
      background: none;
      border: 1px solid #666;
      border-radius: 3px;
      padding: 1px 8px;
    }
  }
  .week{
    margin: 12px 0;
    >li {
      display: inline-block;
      width: 14.286%;
      text-align: center;
    }
  }
  .days{
    >li {
      display: inline-block;
      width: 14.286%;
      padding: 4px 4px 0 4px;
      text-align: center;
      height:60px;
      float: left;
      flex-direction: column;
      &.selected {
        background: steelblue;
        color: white;
      }
      .dateTotal {
        font-size: 10px;
        line-height: 14px;
        margin-top: 6px;
        text-align: right;
        >div{
          width:100%;
          &.dateCost{
            color: #FF865E;
          }
          &.dateIncome{
            color: #FEE440;
          }
        }
      }
    }
  }
`;

export {CalendarWrapper};